<template>
  <a-card>
    <a-form layout="horizontal" :form="searchForm" @submit="handleSearch" autocomplete="off">
      <a-row type="flex" justify="start" :gutter="15">
        <a-col :md="3" :sm="24">
          <a-form-item>
            <a-auto-complete :data-source="suppliers" v-decorator="['supplier']" :placeholder="$t('supplier')" :filter-option="filterOption" :allowClear="true"/>
          </a-form-item>
        </a-col>
        <a-col :md="3" :sm="24">
          <a-form-item>
            <a-input v-decorator="['supplierHotelId']" :placeholder="$t('supplier_hotel_id')" :allowClear="true"/>
          </a-form-item>
        </a-col>
        <a-col :md="3" :sm="24">
          <a-form-item>
            <a-select v-decorator="['isMapping',{ initialValue: '' }]">
              <a-select-option value="">
                {{$t('is_mapping')}}
              </a-select-option>
              <a-select-option value="True">
                {{$t('yes')}}
              </a-select-option>
              <a-select-option value="False">
                {{$t('no')}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="3" :sm="24">
          <a-form-item>
            <a-input v-decorator="['hotelId']" :placeholder="$t('hotel_id')" :allowClear="true"/>
          </a-form-item>
        </a-col>
        <a-col :md="3" :sm="24">
          <a-form-item>
            <a-select v-decorator="['isTop',{ initialValue: '' }]">
              <a-select-option value="">
                {{$t('sale_top')}}
              </a-select-option>
              <a-select-option value="True">
                {{$t('yes')}}
              </a-select-option>
              <a-select-option value="False">
                {{$t('no')}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="3" :sm="24">
          <a-form-item>
            <a-select v-decorator="['isAvail',{ initialValue: '' }]">
              <a-select-option value="">
                {{$t('available')}}
              </a-select-option>
              <a-select-option value="True">
                {{$t('yes')}}
              </a-select-option>
              <a-select-option value="False">
                {{$t('no')}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="3" :sm="24">
          <a-form-item>
            <a-select v-decorator="['hotelStar',{ initialValue: '' }]">
              <a-select-option value="">
                {{ $t('hotel_star') }}
              </a-select-option>
              <a-select-option value="0">0 {{ $t('star') }}</a-select-option>
              <a-select-option value="1">1 {{ $t('star') }}</a-select-option>
              <a-select-option value="2">2 {{ $t('star') }}</a-select-option>
              <a-select-option value="3">3 {{ $t('star') }}</a-select-option>
              <a-select-option value="4">4 {{ $t('star') }}</a-select-option>
              <a-select-option value="5">5 {{ $t('star') }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row type="flex" justify="start" :gutter="15">
        <a-col :md="4" :sm="24">
          <a-form-item>
            <a-auto-complete :data-source="countryList" v-decorator="['countryName']" :placeholder="$t('country')" :allowClear="true" :filter-option="filterOption"/>
          </a-form-item>
        </a-col>
        <a-col :md="4" :sm="24">
          <a-form-item>
            <a-input v-decorator="['cityName']" :placeholder="$t('city')" :allowClear="true"/>
          </a-form-item>
        </a-col>
        <a-col :md="6" :sm="24">
          <a-form-item>
            <a-input v-decorator="['hotelName']" :placeholder="$t('hotel_name')" :allowClear="true"/>
          </a-form-item>
        </a-col>
        <a-col :md="10" :sm="24">
          <a-form-item>
            <a-space>
              <a-button htmlType="submit" type="primary" icon="search">{{ $t('search') }}</a-button>
              <a-button @click="handleReset">
                {{ $t("reset") }}
              </a-button>
            </a-space>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>

    <a-table size="middle" :columns="columns" :data-source="data" :pagination="{ showSizeChanger: true, showQuickJumper: true, size:'middle', showTotal:(total, range) => `${range[0]}-${range[1]} / ${total}`, current: pageIndex, pageSize: pageSize, total: total, pageSizeOptions:['10','20','30','50','100','1000','2000'], }" :row-key="record => record.id" :loading="loading" @change="handleTableChange">
      <template slot="supplierHotelId" slot-scope="text, record">
        <a @click="openSupplierHotel(record.supplier,record.supplierHotelId)">{{ record.supplierHotelId }}</a>
        <br v-if="record.supplierHotelId1 && record.supplierHotelId1.length > 0" /> {{record.supplierHotelId1}}
      </template>
      <template slot="hotelId" slot-scope="text, record">
        <a @click="openHotel(record.hotelId)" v-if="record.hotelId > 0">{{ record.hotelId }}</a>
      </template>
      <template slot="hotelNameEn" slot-scope="text, record">
        {{ record.hotelNameEn }} <br /> {{ record.hotelNameCn }}
      </template>
      <template slot="hotelAddressEn" slot-scope="text, record">
        {{ record.hotelAddressEn }} <br /> {{ record.hotelAddressCn }}
      </template>
      <template v-for="(item, index) in columns" :slot="item.slotName">
        <span :key="index">{{ $t(item.slotName) }}</span>
      </template>
    </a-table>
  </a-card>
</template>

<script>
import {getPublicData} from '@/services/public'
import {getHotelList} from '@/services/supplier'

export default {
  name: "SupplierList",
  i18n: require('../i18n'),
  data() {
    return {
      suppliers: [],
      countryList: [],
      searchParams: {},
      searchForm: this.$form.createForm(this, {name: 'search'}),
      pageIndex: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      data: [],
      columns: [
        {
          dataIndex: 'supplier',
          align: 'center',
          slotName: "supplier",
          slots: { title: 'supplier' },
        },
        {
          dataIndex: 'supplierHotelId',
          align: 'center',
          slotName: "supplier_hotel_id",
          slots: { title: 'supplier_hotel_id' },
          scopedSlots: { customRender: 'supplierHotelId' },
        },
        {
          dataIndex: 'supplierTop',
          align: 'center',
          slotName: "sale_top",
          slots: { title: 'sale_top' },
        },
        {
          dataIndex: 'hotelId',
          align: 'center',
          slotName: "hotel_id",
          slots: { title: 'hotel_id' },
          scopedSlots: { customRender: 'hotelId' },
        },
        {
          dataIndex: 'hotelNameEn',
          align: 'left',
          slotName: "hotel_name",
          slots: { title: 'hotel_name' },
          scopedSlots: { customRender: 'hotelNameEn' },
        },
        {
          dataIndex: 'hotelStar',
          align: 'center',
          slotName: "hotel_star",
          slots: { title: 'hotel_star' },
        },
        {
          dataIndex: 'countryName',
          align: 'left',
          slotName: "country",
          slots: { title: 'country' },
        },
        {
          dataIndex: 'cityName',
          align: 'left',
          slotName: "city",
          slots: { title: 'city' },
        },
        {
          dataIndex: 'hotelAddressEn',
          align: 'left',
          slotName: "address",
          slots: { title: 'address' },
          scopedSlots: { customRender: 'hotelAddressEn' },
        },{
          dataIndex: 'updatedTime',
          align:'center',
          slotName: "updatedTime",
          slots: { title: 'updatedTime' },
        },
      ],
    }
  },
  methods: {
    getData() {
      getPublicData('sup_dis_coun').then(res => {
        const {suppliers, countryList} = res.data
        this.suppliers = suppliers
        countryList.forEach(item => {
          this.countryList.push({label: item.countryNameEn, value: item.countryNameEn, text: item.countryNameEn})
        })
      }).catch(error => {
        console.log(error)
      })
    },
    fetchData(){
      this.loading = true
      getHotelList(this.pageIndex, this.pageSize, this.searchParams).then(res => {
        const {rows, total} = res.data.data
        this.data = rows
        this.total = total
        this.loading = false
      }).catch(error => {
        console.log(error)
        this.loading = false
      })
    },
    handleTableChange(pagination) {
      if (this.pageIndex === pagination.current && this.pageSize === pagination.pageSize)
        return

      this.pageIndex = pagination.current;
      this.pageSize = pagination.pageSize;
      this.fetchData()
    },
    handleSearch(e) {
      e.preventDefault();
      this.searchForm.validateFields((error, values) => {
        this.searchParams = values;
      });
      this.pageIndex = 1
      this.fetchData()
    },
    handleReset() {
      this.searchForm.resetFields();
    },
    openSupplierHotel(supplier, supplierHotelId){
      this.$openPage('/supplier/hotel/' + supplier + '/' + supplierHotelId, "[" + supplier + "][" + supplierHotelId + "]")
    },
    openHotel(hotelId){
      this.$openPage('/hotel/detail/' + hotelId, "[" + hotelId + "]")
    },
    filterOption(input, option) {
      return (
          option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0
      );
    },
  },
  created() {
    this.getData();
  },
}
</script>